<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link href="/lib/layui/css/layui.css" rel="stylesheet"/>
    <link href="/css/common.css" rel="stylesheet"/>
    <title>tree</title>
    <style type="text/css">
        .downpanel .layui-select-title span {
            line-height: 38px;
        }

        .downpanel dl dd:hover {
            background-color: inherit;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-body">
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">分类名称</label>
                            <div class="layui-input-block">
                                <div class="layui-unselect layui-form-select downpanel">
                                    <div class="layui-select-title">
                                        <span class="layui-input layui-unselect" id="treeclass">选择分类</span>
                                        <input type="hidden" name="selectID" value="0">
                                        <i class="layui-edge"></i>
                                    </div>
                                    <dl class="layui-anim layui-anim-upbit">
                                        <dd>
                                            <ul id="classtree"></ul>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-card">

            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-card">

            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-card">

            </div>
        </div>
    </div>
</div>
<script src="/lib/layui/layui.all.js" charset="utf-8"></script>
<script src="/script/common.js" charset="utf-8"></script>
<script>
    layui.use(['baseUtil'], function () {
        var baseUtil = layui.baseUtil;
        var $ = layui.jquery, tree = layui.tree;

        tree.render({
            elem: "#classtree",
            data: [
                {
                    id: 1,
                    title: '手机',
                    children: [
                        { title: '小米手机', id: 11 },
                        { title: '华为手机', id: 12 },
                        { title: '苹果手机', id: 13 }
                    ]
                },
                {
                    title: '电脑',
                    id: 2,
                    children: [
                        {
                            title: '笔记本',
                            id: 21,
                            spread: true,
                            children: [
                                {
                                    title: '台式笔记本',
                                    id: 211,
                                    children: [{ title: '鼠标', id: 2111 }]
                                },
                                { title: '华为笔记本', id: 212 },
                                { title: '小米笔记本', id: 213 }]
                        },
                        {
                            title: '电脑配件',
                            id: 22,
                            children: [
                                { title: '鼠标', id: 221 },
                                { title: '键盘', id: 222 },
                                { title: '主机', id: 223 }
                            ]
                        }
                    ]
                }],
            click: function (node) {
                var $select = $($(this)[0].elem).parents(".layui-form-select");
                $select.removeClass("layui-form-selected").find(".layui-select-title span").html(node.data.title).end().find("input:hidden[name='selectID']").val(node.data.id);
            }
        });

        $(".downpanel").on("click", ".layui-select-title", function (e) {
            $(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");
            $(this).parents(".downpanel").toggleClass("layui-form-selected");
            layui.stope(e);
        }).on("click", "dl i", function (e) {
            layui.stope(e);
        });

        $(document).on("click", function (e) {
            $(".layui-form-select").removeClass("layui-form-selected");
        });
    });
</script>
</body>
</html>
